<template>

<!--    商家头部-->
   <div class="header">
       <div class="businessInfo">
           <img :src="user.userimage" alt="">
           <p>{{user.username}}</p>
       </div>
       <div class="button-list">
           <el-button type="primary" round @click="dialogFormVisible=true">添加门店</el-button>
           <el-button type="danger" round @click="logout">退出</el-button>
       </div>
   </div>
<!--    下面是门店列表-->
    <el-space wrap :size="size" style="width: 100%;">
        <h5 style="margin-left: 40vw">我的门店</h5>
        <el-card v-for="shop in myShopList" class="box-card" style="width: 300px;position: relative;left: 50%;transform: translateX(-37%)">
            <template #header>
                <div class="card-header">
                    <img :src="shop.shopImage" alt="">
                    <p>{{shop.shopName}}</p>
                    <p>创建时间:{{DateFormate(shop.createTime)}}</p>
                </div>
            </template>
            <div style="position: relative;width: 100%;height: 100%" >
                    <el-button type="primary" round @click="router.push({path:`/businessShopOrders/${shop.id}`})">门店订单</el-button>
                    <el-button type="primary" round @click="router.push({path:`/businessShopItemList/${shop.id}`})">商品管理</el-button>
            </div>

        </el-card>
    </el-space>

<!--    下面是添加门店弹出框-->
    <el-dialog v-model="dialogFormVisible" title="添加门店" width="90%">
        <el-form :model="form">
            <el-form-item label="门店名称" :label-width="formLabelWidth">
                <el-input v-model="form.shopName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="门店描述" :label-width="formLabelWidth">
                <el-input
                    v-model="form.shopDescription"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea"
                    placeholder="Please input"
                />
            </el-form-item>
            <el-form-item>
                <el-upload
                    class="upload-demo"
                    :on-change="handlePreview"
                    list-type="picture"
                    :auto-upload="false"
                    :limit="1"
                >
                    <el-button type="primary">添加门店图片</el-button>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submit">
          提交
        </el-button>
      </span>
        </template>
    </el-dialog>

</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {getSessionStorage, setSessionStorage} from "../common.js";
import {listMyShopsAPI,createShopAPI} from "../api/api.js";
import router from "../route/route.js";

const size = ref('large')
const formLabelWidth = '100px'
const dialogFormVisible = ref(false)
const user = getSessionStorage("user")
const form = reactive({
    shopName: '',
    shopDescription:"",
    shopImage:"",
})
const myShopList = reactive([])

const getMyShops = ()=>{
    listMyShopsAPI(user.token).then(res=>{
        myShopList.splice(0,myShopList.length)
        myShopList.push(...res.data.data)
    }).catch(e=>console.log(e))
}

onMounted(()=>{
    console.log(user)
    getMyShops()
})
const handlePreview = (e)=>{
    const file = e.raw
    // 创建 FileReader 对象
    const reader = new FileReader();

// 读取文件内容，将其转换为 Base64 编码
    reader.onload = function(event) {
        form.shopImage = event.target.result
    };

    reader.readAsDataURL(file);
}
const submit = ()=>{
    createShopAPI(user.token,form).then(res=>{
        if (res.data.data.id>0){
            alert("添加成功！")
            dialogFormVisible.value = false
            getMyShops()
        }

    }).catch(e=>console.log(e))

}

const DateFormate = (timestamp)=>{
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}/${month}/${day}`;
}


const logout = ()=>{
    setSessionStorage("user","")
    router.push({path:"/login"})
}
</script>

<style scoped>
.header{
    width: 99%;
    height: 30%;
    background-color: #6dc4e8;
    margin-bottom: 10vw;
    border-radius: 5vw;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.header .businessInfo img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
</style>